<template>
	<view class="swipe_box" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend" :style="{'left':'-'+left+'px'}" >
		<slot name="main"></slot>
		<slot name="btn"></slot>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				touchindex:0,//触摸的索引
				startX:0,  //触摸开始位置
				left:0
			};
		},
		props:{
			btnWidth:{
				type:[Number,String],
				default:165
			}
		},
		methods: {
			leftEnd(){
				this.left=0
			},
			// 触摸结束
			touchend(){
				if(this.left<50){
					this.left=0
				}else{
					this.left=uni.upx2px(this.btnWidth)
				}
			},
			// 触摸中
			touchmove(e){
				if(this.left>this.startX){
					this.left=0
				}else{
					this.left=this.startX - e.touches[0].pageX  
				}
			},
			// 触摸开始
			touchstart(e){
				this.startX = e.touches[0].pageX
			}
		}
	}
</script>

<style lang="scss">
.swipe_box{
	position: relative;
}
</style>
